<template>
    <div class="basic" ref="basic" @scroll="scrollListener">
        <slot></slot>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "basic-container",
        computed: {
            ...mapGetters['isHeaderLucency']
        },
        methods: {
            scrollListener() {
                if (this.$refs.basic.scrollTop > 180 && !this.$store.getters.isHeaderLucency) {
                    this.$store.commit('SET_HEADER_LUCENCY', true)
                } else if (this.$refs.basic.scrollTop < 180 && this.$store.getters.isHeaderLucency) {
                    this.$store.commit('SET_HEADER_LUCENCY', false)
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .basic {
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
    }
</style>